<template>
    <div>
        <ul class="song-dist">
            <li v-for="(item,index) in singerInfo" :key="index" @click="changeUrl(item.ting_uid)">
                <img :src="item.avatar_s180" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getSingerInfo} from "../api/api";

    export default {
        name: "singer",
        data(){
          return{
              singerInfo:[],
              songId:[
                  "2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"
              ]
          }
        },
        created() {
            for (const item of this.songId){
                getSingerInfo(item).then(res=>{
                    console.log(res)
                   this.singerInfo.push(res);
                })
            }
        },
        methods:{
            changeUrl(i){
                this.$router.push("/singerSong?songid="+i)
            }
        }
    }
</script>

<style lang="less" scoped>
.song-dist{
    li{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 10px 0;
        margin: 0 10px;
        border-bottom: 1px solid #eeeeee;
        img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        p{
            width: calc(100% - 80px);
        }
    }
}
</style>